<template>
    <div style="width: 1000px">
        <div style="  text-align: center;font-size: 24px;padding: 30px">修改密码</div>
        <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm">
            <el-form-item label="旧密码" prop="password">
                <el-input
                        type="password"
                        v-model="ruleForm.password"
                        autocomplete="off"
                ></el-input>
            </el-form-item><el-form-item label="新密码" prop="pass">
                <el-input
                        type="password"
                        v-model="ruleForm.pass"
                        autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input
                        type="password"
                        v-model="ruleForm.checkPass"
                        autocomplete="off"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import request from "../../utils/request";


    export default {
        name: "editPassword",
        data() {

            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass')
                    }
                    callback()
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass')
                    }
                    callback()
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    pass: '',
                    password: '',
                    checkPass: '',
                },
                rules: {
                    password: [{validator: validatePassword, trigger: 'blur'}],
                    pass: [{validator: validatePass, trigger: 'blur'}],
                    checkPass: [{validator: validatePass2, trigger: 'blur'}],
                },
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request.get("user/editPassword/"+this.ruleForm.password+"/"+this.ruleForm.pass).then(res=>{
                            if (res.code==="0"){
                                this.$message({
                                    type: "success",
                                    message: "更新成功！"
                                })
                                localStorage.clear()
                                this.$router.push("login")
                            }else if (res.code==="-2"){
                                this.$message({
                                    type: "error",
                                    message: "旧密码错误！"
                                })
                            }else{
                                this.$message({
                                    type: "error",
                                    message: "修改失败！"
                                })
                            }
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "提交失败！"
                        })
                        return false
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
        },
    }
</script>

<style scoped>

</style>